用MathJax寫方程式

14th鐵人賽 mathjax javascript

olddunk

2022-09-14 06:09:45

3329 瀏覽

分享至

一般像數學、物理和化學等專業人士，使用簡報或文書處理軟體的時候，都會搭配專業的科學符號字型軟體。一般最常字的就是Mathtype，如果網頁要代替簡報軟體，除了提供能具備坐標繪圖能力的套件外，也必須能夠渲染科學符號字體的套件。
這裏只有唯一沒有其中之一的數學方程式套件：MathJax。

開始使用MathJax

Mathjax提供了CDN的方式引入，只要在index.html的head區塊加入下面程式碼就可以在我們的body區塊使用。下面程式我們在body區塊加入的tex的語法。

<head>
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
    <p>當 \(a \ne 0\), 一元二次方程式 \(ax^2 + bx + c = 0\) 的兩根為
        $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </p>
</body>

Mathjax會在瀏覽器下載html檔後，再將數學符號的部分進行編輯，所以有時候要等候一段時間，才能看到數學符號的呈現。

Mathjax官網上提到能提供server-side render的使用方式，理論上，應該可以避免在瀏覽器上出現原始latex語法的問題。

Mathjax的輸入格式可以Latex（Tex）和MathML（數學標記語言），而輸出則有經由CSS樣式化的Html元素和向量圖形格式SVG（Scalable Vector Graph）兩種，所以提供了tex-chtml.js、tex-svg.js、mml-chtml.js、mml-svg.js、tex-mml-chtml.js和tex-mml-svg六種組合模組，我們可以視需要下載。

上面的下載指令出現mathjax@3可以下載最新版本，如果要下載特定版本，可改成mathjax@3.0.1。

MathML的語法相當瑣碎不好使用（大致上就和MathJax的chtml差不多），通常我們都使用Latex（Tex）語法，至於要用那一種輸出，就看個人的喜好和方便。

Tex（Latex）是將文件輸出到列印設備的排版印擎，而MathJax則是輸出至網頁用，所以MathJax對Latex語法的支援有相當的限制。因為具備CSS樣式化的html就已經有排版的能力，所以MathJax並不支援Latex中的文字排版功能，主要是支援數學模式的符號排版和呈現。

MathJax首先會檢查網頁那個部分是數學模式，Latex和MathJax所用的邊界符號（delimeter）為雙錢字符$$，所以兩對雙錢字符號之間的部分就會被視為數學模式，像上面這一部分x = {-b \pm \sqrt{b^2-4ac} \over 2a}.，將會被轉譯成Mathjax，螢幕則呈現美觀的數學符號。
mathjax
Latex也提供行內數學模式，使用單錢字符$做為邊界符號，但是因為許多網頁會使用單錢字符做其它用途，因此MathJax預設使用$和$做為行內數學模式邊界符號，所以ax^2 + bx + c = 0也為被渲染為數學符號。我們也可以配置自己喜好的邊界符號。

Configure MathJax

我們可以透過MathJax這個物件來進行個人化的配置，例如，我們仍想使用單錢字符做為行內數學模式的邊界符號，可以html的之前加入

<script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    };
</script>

tex-chtml.js預設只載入ams、 newcommand、require、autoload、configmacros和noundefined這幾個擴充（extension），當需要額外套件時，再用\require{套件名稱}動態載入套件，或是在MathJax物件中加入類似下列程式碼

     MathJax = {
      loader: {
          load: ['[tex]/mathtools']
      }
      tex: {
          inlineMath: [['$', '$'], ['\\(', '\\)']],
          packages: {
              '[+]': ['mathtools']
          }
      }
    };

MathJax有提供tex-chtml-full.js和tex-svg-full.js可以事先下載所有套件，不過有些外掛套件仍要自行載入。

我想分享一個數學向量符號製作，這個符號花了非常多的時間找MathJax支援的套件才解決，所以這邊用mathtools這個套件當例子。MathJax提供的向量符號\vec不是很適合，例如：\vec{a}的圖形會是 vec ，它提供的另一符號\rightharpoonup比較美觀與適合，搭配\overset，語法\overset{\rightharpoonup}{a}便可得到較好的向量符號，但是只能用在一個字母的向量符號，如果改成\overset{\rightharpoonup}{AB}，螢幕會呈現 harpAB ，很明顯的，向量符號的長度並不夠。mathtools這個擴展提供了可伸展向量符號\xrightharpoonup{}（要記得加大括號），所以\overset{\xrightharpoonup}{AB}就可得到 myvec
我們可以在MathJax物件中的tex子物件中配置macros，建置自己的Latex指令\myvec如下:

tex: {
    packages: {
      '[+]': ['mathtools']
    },
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    macros: {
      myvec: ['\\overset{ \\xrightharpoonup{} }{ #1 }', 1]
    }
}

myvec的陣列值中，第1個元素是javascript字串'\overset{ \xrightharpoonup{} }{ #1 }'，我們用#1代替AB，接下來我們就可用\vec{AB}產我們我們要的向量符號。第2個元素數字1是代表\myvec這個命令有多少個參數。

在javascript字串中，我們必須在反斜線（\）前面再加一個反斜線當作跳脫字元，所以會有兩個反斜線（\）。

Latex語法

一般人輸入數學符號都是用Word中的mathtype軟體，mathtype提供圖型化的界面讓輸入數學符號變得十分友善；雖然大家對latex語法並不熟悉，幸好有一些Latex線上編輯器提供圖形化的界面，協助進行數學符號的輸入，我們可以將網頁輸出的Latex語法拷貝下來，再依個人需要使用，下面推薦我個人較常使用的一個線上編輯器。
Latex線上編輯器
如果要輸入分數，可以進行如下操作，其它符號可以自己玩玩看。

點選分數圖示

除了線上編輯器，也有許多的網路資源將常用的Latex符號進行分類整理，使用起來也很方便。
辛西亞的技能術

今日程式碼連結

https://replit.com/@yegc22/iThomeIronman2022Day10?v=1

今日小結

有了MathJax之後，我們就可以在網頁上呈現美觀的數學符號和方程式，即使放大也不會呈現鋸齒狀，對數學知識的傳遞有很大很幫助。不過，由於MathJax對很多Latex的擴充套件（extension package）並沒有支援，對於已經習慣很多Latex的人來說，會覺得有些可惜。明天開始，我們就借助MathJax來進行尤拉線證明的教學媒體製作。